import {
    ProFormText,
    ProFormSwitch,
    ProFormSelect,
    ProFormCheckbox,
    ProFormDigit,
} from "@ant-design/pro-components";
import { Form, Col, Row } from "antd";
import { ssid_encryption, columnsConfig2_4, columnsConfig5_8 } from "./data";
import { check_password, check_32_bytes_string } from "./Validator";
import { useContext } from "react";
import { AllContext } from '@src/Common/AllContext';


export default () => {
    const { wifiTabKey, formRef } = useContext(AllContext);
    let columnsConfig: any = [];
    if (wifiTabKey === "ssid2_4") {
        columnsConfig = columnsConfig2_4;
    } else if (wifiTabKey === "ssid5_8") {
        columnsConfig = columnsConfig5_8;
    }

    //clear password
    const handleSelectEncryption = (
        e: any,
        namePrefix: any,
        namePrefix2: any
    ) => {
        if (e === "none" && formRef?.current) {
            formRef?.current?.setFieldValue([namePrefix, namePrefix2, "key"], "");
        }
    };

    const SSidFormFieldsModule = (namePrefix: string, order: number) => {
        let namePrefix2: any = null;
        namePrefix2 = namePrefix + "_" + order;
        return (
            <div>
                <br />
                <ProFormSwitch
                    name={[namePrefix, namePrefix2, "disabled"]}
                    label="开关"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                />
                <ProFormCheckbox
                    name={[namePrefix, namePrefix2, "hidden"]}
                    label="隐藏WiFi"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                />
                <ProFormText
                    name={[namePrefix, namePrefix2, "ssid"]}
                    label="WiFi名称"
                    rules={[{
                        required: false, validator: (rule, value, callback) => {
                            return Promise.resolve(check_32_bytes_string(rule, value, callback, "SSID invalid"));
                        },
                    }]}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    placeholder={'中英最大32个字符长度'}
                />
                <ProFormSelect
                    name={[namePrefix, namePrefix2, "encryption"]}
                    label="加密方式"
                    options={ssid_encryption}
                    onChange={(e) => handleSelectEncryption(e, namePrefix, namePrefix2)}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                />
                <ProFormText.Password
                    rules={[
                        {
                            required: false,
                            validator: (rule, value, callback) => {
                                // if encryption's and key's value is 'none', then don't validate the filed of 'key'
                                const encryption = formRef?.current?.getFieldValue([
                                    namePrefix,
                                    namePrefix2,
                                    "encryption",
                                ]);
                                if (encryption === "none" && value === "") {
                                    return Promise.resolve();
                                } else {
                                    return Promise.resolve(check_password(rule, value, callback));
                                }
                            },
                        },
                    ]}
                    name={[namePrefix, namePrefix2, "key"]}
                    label="无线密码"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                />
                <ProFormDigit
                    name={[namePrefix, namePrefix2, "vlanid"]}
                    label="VLAN ID"
                    min={0}
                    max={4096}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                />
            </div>
        );
    };


    return (
        <Row
            gutter={[48, { xs: 8, sm: 16, md: 24, lg: 32, xl: 40 }]}
            key={wifiTabKey}
        >
            {columnsConfig.map((config: any, index: any) => {
                return (
                    <Col key={index} {...config}>
                        <span className="Form-Item-Title-Span">{config.label}</span>
                        {SSidFormFieldsModule(config.name, config.order)}
                    </Col>
                )
            })}
        </Row>
    );
};
